<template>
  <div class="pageTools">
    <div class="left">
      <div v-if="showLeft" class="left-content">
        <i class="el-icon-info" />
        <slot name="left" />
      </div>
    </div>
    <div class="right">
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageTools',
  props: {
    showLeft: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.pageTools{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    .left {
        .left-content{
            background-color: #e6f7ff;
            padding: 10px;
            border: 1px solid #91d5ff;
            display: flex;
            align-items: center;
            .el-icon-info{
                color: #409eff;
            }
        }
    }
    .right {
        display: flex;
        align-items: center;
    }
}

</style>
